<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2025-08-22 09:43:17
 * @LastEditors: sueRimn
 * @LastEditTime: 2025-09-01 15:02:55
-->
<template>
  <div class="recycle-page">
    <!-- Promotional Banner -->
    <div class="promo-banner">
      <img :src="promoImage" alt="回收专场" class="promo-image" />
    </div>

    <!-- Product List -->
    <div class="product-list">
      <ProductCard 
        v-for="product in productList" 
        :key="product.id"
        :product="product"
        @recycle="startRecycle"
      />
    </div>

    <!-- More Models Button -->
    <div class="more-models">
      <button class="more-btn" @click="showMoreModels">
        更多机型回收
      </button>
    </div>
  </div>
</template>

<script>
import ProductCard from '@/components/product-card/index.vue'
import specialPageMixin from '@/mixins/specialPage.js'

export default {
  name: 'NotebookRecyclePage',
  components: {
    ProductCard
  },
  mixins: [specialPageMixin],
  methods: {
    getDefaultCategoryId() {
      return '100004'
    },
    
    getDefaultCategoryName() {
      return '笔记本'
    },
    
    getDefaultPromoImage() {
      return 'https://image.chushouya.com/assets/images/special/bijiben.png'
    }
  }
}
</script>

<style scoped>
.recycle-page {
  min-height: 100vh;
  background: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding: 0;
}

.promo-image {
  width: 750rpx;
  height: 300rpx;
}

.product-list {
  width: 750rpx;
  background: #FFFFFF;
  border-radius: 32rpx 32rpx 18rpx 18rpx;
  padding: 1rpx 32rpx 0;
  margin-top: -30rpx;
  z-index: 999;
  position: relative;
}

.more-models {
  padding: 20px 16px 40px;
}

.more-btn {
  width: 100%;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #333;
  border: none;
  padding: 16rpx;
  border-radius: 50rpx;
  font-size: 32rpx;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.more-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 165, 0, 0.4);
}
</style>